<template>
  <main>
    <div v-for="(component,index) of components" 
      :key="index" 
      :class="{active:component.name == currentComponent}"
      @click="currentComponent=component.name"
    >{{component.title}}</div>
  </main>
  <button @click="testRef">调用组件</button>
  <input type="text">
  <keep-alive>
    <component :is="currentComponent" ref="component"/>
  </keep-alive>
  {{config}}
  <!-- <input type="text" v-model="student">{{student}} -->
</template>

<script>
//动态组件
import Wexin from "./components/Wexin.vue"
import Site from "./components/Site.vue"
import {computed} from 'vue'
import config from "./config"

export default {
  components:{Wexin,Site},
  // provide与inject完成数据穿透
  provide(){
    return {
      webname:computed(()=>this.student),
      config:this.config}
  },
  data() {
    return {
      // student:{name:'罗洋洋'},
      config,
      student:'罗洋洋',
      currentComponent:'weixin',
      components:[
        {title:'微信支付',name:'wexin'},
        {title:'在线支付',name:'site'}
      ],
    }
  },
  methods:{
    testRef(){
      this.$refs.component.show();
    }
  },
}
</script>

<style scoped>
main{
  display:flex;
}
main div {
  padding:10px;
  margin:0 5px;
  border: 1px solid rgb(36, 142, 184);
  cursor: pointer;
  border-radius: 5px;
  transition: .5s;
}
.active{
  background-color: #36d;
}

</style>
